<template>
	<view>
		<img :src="imgUrl" :style="{width:size + 'upx',height:size + 'upx'}" alt="">
	</view>
</template>

<script>
	export default {
		props: {
			size: {
				type: [Number, String],
				default: 36
			},
			src: [String],
			color: [String]
		},
		created() {
			this.parseSvg()
		},
		data() {
			return {
				imgUrl: ''
			};
		},
		methods: {
			String2ArrayBuffer(str, cb) {
			        var b = new Blob([str]);
			        var f = new FileReader();
			        f.onload = function(e) {
			            cb(e.target.result);
			        }
			        f.readAsArrayBuffer(b);
			},
			parseSvg() {
				if (this.color) {
					wx.getFileSystemManager().readFile({
						filePath: this.src,
						encoding: 'binary',
						success: (res) => {
							const reg = /fill="#[a-z0-9]{0,6}"/g
							let str = ''
							if (reg.test(res.data)) {
								str = res.data.replace(reg, "fill='" + this.color + "'")
							} else {
								str = res.data.replace(/<path\s/g, "<path fill='" + this.color + "'")
							}
							
							// console.log(Base64)
							const base64 = this.String2ArrayBuffer(str,function(buf){
								return wx.arrayBufferToBase64(buf)
							})
							this.imgUrl = 'data:image/svg+xml;base64,' + base64
						},
						fail: (res) => {
							
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">

</style>
